import { useEffect, useState, useRef } from "react";
import * as THREE from "three";
import { makeTriangle } from "../utils/makeTriangle";
import { Triangles } from "../types";
interface props {
  Triangles: Triangles;
  setTriangles: (val: Triangles) => void;
}
export function AddTriangle(props: props) {
  const TriangleGroup = useRef<THREE.Group<THREE.Object3DEventMap>>(null);
  const addTriangle = () => {
    const material = new THREE.MeshBasicMaterial({
      color: new THREE.Color(0x00ff00),
    });
    const lineMaterial = new THREE.LineBasicMaterial({
      color: new THREE.Color(0x00ff00),
    });
    // const point = this.Triangles.length;
    const triangle = makeTriangle(material, lineMaterial, (t) => {
      props.Triangles = props.Triangles.filter((triangle) => {
        return triangle !== t;
      });
      TriangleGroup.current!.remove(t.group);
    });
    TriangleGroup.current!.add(triangle.group);
    props.setTriangles && props.setTriangles([triangle]);
  };
  const init = () => {
    setInterval(addTriangle, 500);
  };
  useEffect(init, []);
  return <group ref={TriangleGroup}></group>;
}
